<!DOCTYPE HTML>
<html>

<head>
	<link rel="bookmark"  type="image/x-icon"  href="/img/logo_miccall.png"/>
	<link rel="shortcut icon" href="/img/logo_miccall.png">
	
			    <title>
    Ame雨
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/amelin-ting/css/mic_main.css" />
    <link rel="stylesheet" href="/amelin-ting/css/dropdownMenu.css" />
    <meta name="keywords" content="Ame雨" />
    
    	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	 
    <noscript>
        <link rel="stylesheet" href="/amelin-ting/css/noscript.css" />
    </noscript>
    <style type="text/css">
        body:before {
          content: ' ';
          position: fixed;
          top: 0;
          background: url('/amelin-ting/img/bg.jpg') center 0 no-repeat;
          right: 0;
          bottom: 0;
          left: 0;
          background-size: cover; 
        }
    </style>

			    
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


    <script src="/amelin-ting/js/jquery.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrollex.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrolly.min.js"></script>
    <script src="/amelin-ting/js/skel.min.js"></script>
    <script src="/amelin-ting/js/util.js"></script>
    <script src="/amelin-ting/js/main.js"></script>
	
<meta name="generator" content="Hexo 5.4.0"></head>
    
		
<!-- Layouts -->



<!--  代码渲染  -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
    <!-- Wrapper 外包 s-->
    <div id="wrapper" class="fade-in">
        <!-- Intro 头部显示 s -->
        <!-- Intro 头部显示 e -->
        <!-- Header 头部logo start -->
        <header id="header">
    <a href="/amelin-ting/" class="logo">Art Space</a>
</header>
        <!-- Nav 导航条 start -->
        <nav id="nav" class="special" >
            <ul class="menu links" >
			<!-- Homepage  主页  --> 
			<li >
	            <a href="/amelin-ting/" rel="nofollow">主页</a>
	        </li>
			<!-- categories_name  分类   --> 
	        
	        <li class="active">
	            <a href="#s1">分类</a>
	                    <ul class="submenu">
	                        <li>
	                        <a class="category-link" href="/amelin-ting/categories/Go/">Go</a></li><li><a class="category-link" href="/amelin-ting/categories/django/">django</a></li><li><a class="category-link" href="/amelin-ting/categories/drf/">drf</a></li><li><a class="category-link" href="/amelin-ting/categories/gin/">gin</a></li><li><a class="category-link" href="/amelin-ting/categories/go/">go</a></li><li><a class="category-link" href="/amelin-ting/categories/linux/">linux</a></li><li><a class="category-link" href="/amelin-ting/categories/mysql/">mysql</a></li><li><a class="category-link" href="/amelin-ting/categories/python/">python</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/">内网穿透</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%89%8D%E7%AB%AF/">前端</a>
	                    </ul>
	        </li>
	        
	        <!-- archives  归档   --> 
	        
	        
		        <!-- Pages 自定义   -->
		        
		        <li>
		            <a href="/about/" title="简历">
		                简历
		            </a>
		        </li>
		        
		        <li>
		            <a href="/group/" title="团队">
		                团队
		            </a>
		        </li>
		        
		        <li>
		            <a href="/gallery/" title="图库">
		                图库
		            </a>
		        </li>
		        
		        <li>
		            <a href="/tag/" title="标签">
		                标签
		            </a>
		        </li>
		        


            </ul>
            <!-- icons 图标   -->
			<ul class="icons">
                    
                    <li>
                        <a title="github" href="https://github.com/miccall" target="_blank" rel="noopener">
                            <i class="icon fa fa-github"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a title="500px" href="http://500px.com" target="_blank" rel="noopener">
                            <i class="icon fa fa-500px"></i>
                        </a>
                    </li>
                    
			</ul>
</nav>

        <div id="main" >
            <div class ="post_page_title_img" style="height: 25rem;background-image: url(https://img1.baidu.com/it/u=851276270,846876499&amp;fm=26&amp;fmt=auto);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
                <a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >前端HTML</h2></a>
            </div>
            <!-- Post -->
            <div class="typo" style="padding: 3rem;">
                <h1 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h1><h2 id="一、什么是前端"><a href="#一、什么是前端" class="headerlink" title="一、什么是前端"></a>一、什么是前端</h2><figure class="highlight go"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。</span><br></pre></td></tr></table></figure>

<h2 id="二、什么是后端"><a href="#二、什么是后端" class="headerlink" title="二、什么是后端"></a>二、什么是后端</h2><figure class="highlight go"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">后端是在后台工作的，控制着前端的内容，主要负责程序设计架构思想，管理数据库等。后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等，涉及动态语言如PHP、ASP、JSP等</span><br></pre></td></tr></table></figure>

<h2 id="三、WEB服务本质-amp-HTTP协议前戏"><a href="#三、WEB服务本质-amp-HTTP协议前戏" class="headerlink" title="三、WEB服务本质&amp;HTTP协议前戏"></a>三、WEB服务本质&amp;HTTP协议前戏</h2><figure class="highlight go"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">软件开发架构： c/s   b/s</span><br><span class="line">所有的Web应用本质上就是一个socket服务端，而用户的浏览器就是一个socket客户端</span><br></pre></td></tr></table></figure>

<h2 id="四、HTTP协议"><a href="#四、HTTP协议" class="headerlink" title="四、HTTP协议"></a>四、HTTP协议</h2><figure class="highlight go"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">HTTP协议：</span><br><span class="line">HTTP协议主要统一规定了客户端和服务器之间的通信格式</span><br><span class="line"><span class="string">&quot;b&#x27;GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection:....&quot;</span></span><br><span class="line">规定请求数据 / 响应数据格式！</span><br><span class="line">每个HTTP请求和响应都遵循相同的格式，一个HTTP包含Header和Body两部分，其中Body是可选的。 HTTP响应的Header中有一个 Content-Type表明响应的内容格式</span><br></pre></td></tr></table></figure>

<h2 id="五、HTML前戏"><a href="#五、HTML前戏" class="headerlink" title="五、HTML前戏"></a>五、HTML前戏</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">1.什么是HTML</span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>hello girl<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;http://www.mzitu.com/&#x27;</span>&gt;</span> give me see see<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://img1.baidu.com/it/u=2024817993,195997600&amp;fm=11&amp;fmt=auto&amp;gp=0.jpg&#x27;</span>/&gt;</span></span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line">超文本标记语言</span><br><span class="line">如果我们想浏览器能渲染出我们想要的页面，就得追寻HTML语法</span><br><span class="line">我们能直接看到的浏览器 内部其实就是HTML代码(所有的网站内部都是HTML代码)</span><br><span class="line">&quot;&quot;&quot;</span><br></pre></td></tr></table></figure>

<h2 id="六、HTML简介"><a href="#六、HTML简介" class="headerlink" title="六、HTML简介"></a>六、HTML简介</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">1.注释 注释是代码他妈，我们不管学什么语言 第一个肯定学注释</span><br><span class="line">    <span class="comment">&lt;!--单行注释--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">    多行注释</span></span><br><span class="line"><span class="comment">    多行注释</span></span><br><span class="line"><span class="comment">    多行注释</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line">    # 在HTML语言中 因为对格式没有要求 所以看起来杂乱无章，所以会用注释来分隔代码 </span><br><span class="line">    例如:</span><br><span class="line">    <span class="comment">&lt;!--导航条开始--&gt;</span></span><br><span class="line">    导航条所有的代码</span><br><span class="line">    <span class="comment">&lt;!--导航条结束--&gt;</span></span><br><span class="line"></span><br><span class="line">2.html文档结构</span><br><span class="line">	<span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">head</span>&gt;</span><span class="tag">&lt;/<span class="name">head</span>&gt;</span>:head标签不是给人看的，啊 不是，不是给用户看的，是定义配置给浏览器看的</span><br><span class="line">        <span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span>:body标签就是给人看的，写什么浏览器就渲染什么，然后呈现给用户看</span><br><span class="line">	<span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line">ps:文件的后缀名其实是给用户看到的，只不过对应不同的文件名后缀有不同的软件去处理并添加很多功能</span><br><span class="line">ps:html代码是没有格式的，全部写在一行都没有问题，只不过我们习惯了缩进</span><br><span class="line"></span><br><span class="line">3.两种打开文件的方法</span><br><span class="line">	3.1 找到HTML文件 右键选择浏览器打开</span><br><span class="line">	3.2 在pycharm打开这个文件，然后右侧会出现浏览器图标(注意 点击图标一定是得下载好的浏览器)</span><br><span class="line"></span><br><span class="line">4.标签的分类</span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;http:/www.mzitu.com/&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span>/&gt;</span></span><br><span class="line">	4.1 双标签 </span><br><span class="line">	4.2 单标签(自闭和标签)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="七、head内常用标签"><a href="#七、head内常用标签" class="headerlink" title="七、head内常用标签"></a>七、head内常用标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">ps: 在书写HTML代码的时候 你只需要写标签名 然后按TAB 会自动帮你补全</span><br><span class="line">1.网页标题</span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span> </span><br><span class="line"></span><br><span class="line">2.内部用来书写css代码</span><br><span class="line">	<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">        <span class="selector-tag">h1</span>&#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">color</span>: greenyellow;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">   </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line">3.内部用来书写JS代码</span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">        alert(123)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">&lt;!--还可以引入外部JS文件--&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&#x27;myjs.ks&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">4.当你再用浏览器查询的时候，只要是keywords后面的关键字，那么该网页都有可能被百度搜索出来展示给用户</span><br><span class="line">	<span class="tag">&lt;<span class="name">mate</span> <span class="attr">name</span>=<span class="string">&#x27;keywords&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺&quot;</span>&gt;</span></span><br><span class="line">   </span><br><span class="line">5.网页的描述性信息</span><br><span class="line">    <span class="tag">&lt;<span class="name">mate</span> <span class="attr">name</span>=<span class="string">&quot;description&quot;</span> <span class="attr">content</span>=<span class="string">&quot;淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="八、body内常用标签"><a href="#八、body内常用标签" class="headerlink" title="八、body内常用标签"></a>八、body内常用标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ps:你在浏览器上肉眼可见的页面 内部都是HTML代码</span><br></pre></td></tr></table></figure>

<h3 id="8-1-基本标签"><a href="#8-1-基本标签" class="headerlink" title="8.1 基本标签"></a>8.1 基本标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">1.标题标签 1~6级标题</span><br><span class="line">	<span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">h2</span>&gt;</span>我是h2<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">	...</span><br><span class="line">	<span class="tag">&lt;<span class="name">h6</span>&gt;</span>我是h6<span class="tag">&lt;/<span class="name">h6</span>&gt;</span></span><br><span class="line">2.</span><br><span class="line">	<span class="tag">&lt;<span class="name">b</span>&gt;</span>加粗<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">u</span>&gt;</span>下划线<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">s</span>&gt;</span>删除线<span class="tag">&lt;/<span class="name">s</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>段落<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">br</span>&gt;</span> 换行</span><br><span class="line">	<span class="tag">&lt;<span class="name">hr</span>&gt;</span> 水平分割线</span><br></pre></td></tr></table></figure>

<h3 id="8-2-标签的分类"><a href="#8-2-标签的分类" class="headerlink" title="8.2 标签的分类"></a>8.2 标签的分类</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>块儿级标签：独占一行</span><br><span class="line">	例如 h1~h6 p div</span><br><span class="line">    块儿级标签可以修改长度 但是行内标签不行 你修改了也没用，没有任何变化</span><br><span class="line">    块儿级标签内部可以嵌套任意的块儿级标签和行内标签，但是P标签虽然是块儿级标签，但是他只能嵌套行内标签，不能嵌套块儿级标签</span><br><span class="line">    如果你套了 问题也不大，因为浏览器会自动帮你解开(浏览器是面向用户的，不会轻易报错，哪怕报错了用户也感觉不出来)</span><br><span class="line">    总结：</span><br><span class="line">    	只要是块儿标签都可以嵌套任意的块儿行内标签</span><br><span class="line">        但是P标签只能嵌套行内标签(这是HTML的书写规范)</span><br><span class="line">        </span><br><span class="line"><span class="number">2.</span>行内标签：自身文本有多大就占用多大</span><br><span class="line">	例如 i u s b span</span><br><span class="line">    行内标签不能嵌套块儿级标签 可以嵌套行内标签</span><br></pre></td></tr></table></figure>

<h3 id="8-3-特殊符号"><a href="#8-3-特殊符号" class="headerlink" title="8.3 特殊符号"></a>8.3 特殊符号</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">&amp;nbsp;</span> 空格</span><br><span class="line"><span class="symbol">&amp;gt;</span> 大于号</span><br><span class="line"><span class="symbol">&amp;lt;</span> 小于号</span><br><span class="line"><span class="symbol">&amp;amp;</span>  &amp;</span><br><span class="line"><span class="symbol">&amp;yen;</span>  ¥</span><br><span class="line"><span class="symbol">&amp;copy;</span>	©</span><br><span class="line">商标<span class="symbol">&amp;reg;</span>  ®</span><br></pre></td></tr></table></figure>

<h3 id="8-4-常用标签—div-amp-span"><a href="#8-4-常用标签—div-amp-span" class="headerlink" title="8.4 常用标签—div &amp; span"></a>8.4 常用标签—div &amp; span</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">div 块儿级标签</span><br><span class="line">span 行内标签</span><br><span class="line">上树的两个标签是在构造页面初期最常使用的，页面的布局一般先用div和span占位之后再去调整样式，尤其是div使用非常的频繁</span><br><span class="line">div你可以把他看做是一块区域 也意味着用div来提前规划所有的区域</span><br><span class="line">之后往该区域填写内容即可</span><br><span class="line">而普通的文本先用span</span><br></pre></td></tr></table></figure>

<h3 id="8-5-img标签"><a href="#8-5-img标签" class="headerlink" title="8.5 img标签"></a>8.5 img标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">1. 图片标签</span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">src</span><br><span class="line">	1.1 图片的路径 可以是本地的也可以是网上的</span><br><span class="line">	1.2 url 自动朝该url发送get请求获取数据</span><br><span class="line"></span><br><span class="line">alt</span><br><span class="line">	alt=&quot;这是我前女友&quot;</span><br><span class="line">		<span class="comment">&lt;!--当图片加载不出来的时候 给图片的描述信息--&gt;</span></span><br><span class="line"></span><br><span class="line">title=&quot;新垣结衣&quot;</span><br><span class="line">	<span class="comment">&lt;!--当鼠标悬浮在图片上之后 自动展示的提示信息--&gt;</span></span><br><span class="line"></span><br><span class="line">height=&quot;800px&quot;</span><br><span class="line">width=&quot;100px&quot;</span><br><span class="line">	<span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">	高度和宽度当你只修改一个的时候 另外一个参数会等比缩放</span></span><br><span class="line"><span class="comment">	如果非要改两个而且没考虑比例问题也可以，图片会失真</span></span><br><span class="line"><span class="comment">	--&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-6-a标签"><a href="#8-6-a标签" class="headerlink" title="8.6 a标签"></a>8.6 a标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">1. 链接标签</span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">    当a标签指定的网址从来没有被点击过 你那么a标签的字体颜色是蓝色</span></span><br><span class="line"><span class="comment">    如果点击过了就会是紫色(浏览器给你记忆了)</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line">href </span><br><span class="line">	放url 用户点击就会跳转到该url页面</span><br><span class="line">	放其他标签的ID值 点击即可跳转到对应的标签位置</span><br><span class="line">target</span><br><span class="line">	默认a标签时在当前页面完成跳转 _self</span><br><span class="line">	你也可以修改为新建页面跳转    _blank</span><br><span class="line"></span><br><span class="line">2. a标签的锚点功能</span><br><span class="line">	<span class="comment">&lt;!--点击一个文本标题 页面自动跳转到标题对应的内容区域--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;d1&quot;</span>&gt;</span>顶部<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    &lt;<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;d1&quot;</span>&gt;</span>顶部<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">&quot;d111&quot;</span>&gt;</span>hello world<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;height: 1000px;background-color: red&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;d2&quot;</span>&gt;</span>中间<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;height: 1000px;background-color: greenyellow&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#d1&quot;</span>&gt;</span>底部<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#d2&quot;</span>&gt;</span>回到中间<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#d111&quot;</span>&gt;</span>回到中间<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-7-标签具有的两个重要属性"><a href="#8-7-标签具有的两个重要属性" class="headerlink" title="8.7 标签具有的两个重要属性"></a>8.7 标签具有的两个重要属性</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1.id值</span><br><span class="line">	类似于标签的身份证号 在同一个html页面上id值不能重复</span><br><span class="line">2.class值</span><br><span class="line">	该值有点类似于面对对象里面的继承 一个标签可以继承多个class值</span><br><span class="line">3.标签既可以有默认的书写也可以有自定义的属性</span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;d1&quot;</span> <span class="attr">class</span>=<span class="string">&quot;c1&quot;</span> <span class="attr">username</span>=<span class="string">&quot;ame&quot;</span> <span class="attr">password</span>=<span class="string">&quot;123&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-8-列表标签"><a href="#8-8-列表标签" class="headerlink" title="8.8 列表标签"></a>8.8 列表标签</h3><h4 id="8-8-1-有序列表-了解"><a href="#8-8-1-有序列表-了解" class="headerlink" title="8.8.1 有序列表(了解)"></a>8.8.1 有序列表(了解)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span> <span class="attr">type</span>=<span class="string">&quot;1&quot;</span> <span class="attr">start</span>=<span class="string">&quot;5&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>111<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>222<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>333<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="8-8-2-无序列表-较多"><a href="#8-8-2-无序列表-较多" class="headerlink" title="8.8.2 无序列表(较多)"></a>8.8.2 无序列表(较多)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第一项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第二项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第二项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第二项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签</span><br></pre></td></tr></table></figure>

<h4 id="8-8-3-标题列表-了解"><a href="#8-8-3-标题列表-了解" class="headerlink" title="8.8.3 标题列表(了解)"></a>8.8.3 标题列表(了解)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span>标题1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>内容1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span>标题2<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>内容2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span>标题3<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>内容3<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-9-表格标签"><a href="#8-9-表格标签" class="headerlink" title="8.9 表格标签"></a>8.9 表格标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">jason 123 read</span><br><span class="line">egon	123 dbj</span><br><span class="line">tank  123 hecha</span><br><span class="line">...</span><br><span class="line">   <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">  			<span class="tag">&lt;<span class="name">tr</span>&gt;</span>  一个tr就表示一行</span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>username<span class="tag">&lt;/<span class="name">th</span>&gt;</span>  加粗文本</span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>username<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  正常文本</span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  	    <span class="tag">&lt;/<span class="name">thead</span>&gt;</span>  表头(字段信息)</span><br><span class="line">        <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">        	<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>jason<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>123<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>read<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span>  表单(数据信息)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">&quot;1&quot;</span>&gt;</span>  加外边宽</span><br><span class="line"><span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;2&quot;</span>&gt;</span>egon<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  水平方向占多行</span><br><span class="line"><span class="tag">&lt;<span class="name">td</span> <span class="attr">rowspan</span>=<span class="string">&quot;2&quot;</span>&gt;</span>DBJ<span class="tag">&lt;/<span class="name">td</span>&gt;</span>   垂直方向占多行</span><br><span class="line"></span><br><span class="line"># 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看</span><br></pre></td></tr></table></figure>

<h3 id="8-10-表单标签"><a href="#8-10-表单标签" class="headerlink" title="8.10 表单标签"></a>8.10 表单标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line">&quot;&quot;&quot;</span><br><span class="line">能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器</span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line"># 写一个注册功能</span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">form</span>&gt;</span>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端</span><br><span class="line"></span><br><span class="line">1.action:控制数据提交的后端路径(给哪个服务端提交数据)</span><br><span class="line">  	1.什么都不写  默认就是朝当前页面所在的url提交数据</span><br><span class="line">    2.写全路径:https://www.baidu.com  朝百度服务端提交</span><br><span class="line">    3.只写路径后缀action=&#x27;/index/&#x27;  </span><br><span class="line">    	自动识别出当前服务端的ip和port拼接到前面</span><br><span class="line">      host:port/index/</span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;d1&quot;</span>&gt;</span>  第一种 直接讲input框写在label内</span><br><span class="line">                username:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;d1&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span>	第二种 通过id链接即可 无需嵌套</span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;d2&quot;</span>&gt;</span>password:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;d2&quot;</span>&gt;</span></span><br><span class="line">    ps:input不跟label关联也没有问题</span><br><span class="line"></span><br><span class="line">    &quot;&quot;&quot;</span><br><span class="line">    label 和 input都是行内标签</span><br><span class="line">    &quot;&quot;&quot;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">2.input标签 就类似于前端的变形金刚  通过type属性变形</span><br><span class="line">	text:普通文本</span><br><span class="line">  	password:密文</span><br><span class="line">	date:日期	</span><br><span class="line"> 	submit:用来触发form表单提交数据的动作</span><br><span class="line"> 	button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能</span><br><span class="line">  	reset:重置内容</span><br><span class="line">  	radio:单选</span><br><span class="line">    	默认选中要加checked=&#x27;checked&#x27;</span><br><span class="line">      	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span> <span class="attr">checked</span>=<span class="string">&#x27;checked&#x27;</span>&gt;</span>男</span><br><span class="line">      	当标签的属性名和属性值一样的时候可以简写</span><br><span class="line">      	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span> <span class="attr">checked</span>&gt;</span>女</span><br><span class="line">	checkbox:多选</span><br><span class="line">  		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">checked</span>&gt;</span>DBJ</span><br><span class="line">  </span><br><span class="line">  	file:获取文件  也可以一次性获取多个</span><br><span class="line">    	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">multiple</span>&gt;</span></span><br><span class="line">  	hidden:隐藏当前input框</span><br><span class="line">    	钓鱼网站</span><br><span class="line">      	</span><br><span class="line">3.select标签 默认是单选 可以加mutiple参数变多选 默认选中selected</span><br><span class="line">		<span class="tag">&lt;<span class="name">select</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">multiple</span>&gt;</span></span><br><span class="line">               <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span> <span class="attr">selected</span>&gt;</span>新垣结衣<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">               <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span> <span class="attr">selected</span>&gt;</span>斯佳丽<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">               <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span>&gt;</span>明老师<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line"></span><br><span class="line">4.textarea标签  获取大段文本</span><br><span class="line">	  <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">cols</span>=<span class="string">&quot;30&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;10&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line"></span><br><span class="line">ps 能够触发form表单提交数据的按钮有哪些(一定要记住)</span><br><span class="line">		1、<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;注册&quot;</span>&gt;</span></span><br><span class="line">		2、<span class="tag">&lt;<span class="name">button</span>&gt;</span>点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">ps 所有获取用户输入的标签 都应该有name属性</span><br><span class="line">	name就类似于字典的key</span><br><span class="line">  用户的数据就类似于字典的value</span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>gender:</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>男</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>女</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>其他</span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>




            </div>

            <!-- Post Comments -->
            
    <!-- 使用 DISQUS_CLICK -->
<div id="disqus-comment">
    <div id="disqus_thread"></div>

<!-- add animation -->
<style>
	.disqus_click_btn {
            line-height: 30px;
            margin: 0;
            min-width: 50px;
            padding: 0 14px;
            display: inline-block;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
            outline: 0;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            border: 0;
            background: rgba(158, 158, 158, .2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
            color: #fff;
            background-color: #7EC0EE;
            text-shadow: 0
        }
</style>
	
<div class="btn_click_load" id="disqus_bt"> 
    <button class="disqus_click_btn">点击查看评论</button>
</div>

<!--
<script type="text/javascript">
$('.btn_click_load').click(function() {
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'http-miccall-tech'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    document.getElementById('disqus_bt').style.display = "none";
});
</script>
-->
<script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://gitee.com/AmeX/amelin-ting.git/2017/09/23/%E5%89%8D%E7%AB%AF------HTML/';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://gitee.com/AmeX/amelin-ting.git/2017/09/23/%E5%89%8D%E7%AB%AF------HTML/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>

<script type="text/javascript">
    $('.btn_click_load').click(function() {  //click to load comments
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//http-miccall-tech.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
</div>
<style>
    #disqus-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>


        </div>
        <!-- Copyright 版权 start -->
                <div id="copyright">
            <ul>
                <li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
                <li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
            </ul>
            
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
			
        </div>
    </div>
</body>



 	
</html>
